<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>简易订餐 - 披萨</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    let sizeId = 1;
    function clone() {
      sizeId++;
      let oDiv = document.createElement("div");
      oDiv.className = "size mt-4";
      oDiv.innerHTML = `<p><strong>规格</strong><button class="btn btn-outline-danger btn-sm float-right" type="button" onclick="dele(this)">&times;</button></p>
          <div class="form-group row">
              <label for="size-${sizeId}" class="col-sm-1">尺寸</label>
              <div class="col-sm-11">
                  <input id="size-${sizeId}" class="form-control" type="text" placeholder="输入尺寸" autocomplete="off" />
              </div>
          </div>
          <div class="form-group row">
              <label for="price-${sizeId}" class="col-sm-1">价格</label>
              <div class="col-sm-11">
                  <input id="price-${sizeId}" class="form-control" type="text" placeholder="输入价格" autocomplete="off" />
              </div>
          </div>`;
      document.getElementById("size").appendChild(oDiv);
    }
    function dele(obj) {
      $(obj).parents(".size").remove();
    }
  </script>
</body>

</html>